<template>
	<view class="page" :style="'background-image: url('+indexBg+');'">
    <u-navbar :fixed="false" title="充值记录" placeholder bgColor="transparent"></u-navbar>
    <view v-if="statusName=='1'" class="tabs" :style="'background-image: url('+tabs1+');'">
      <view class="tabs-item active">待支付</view>
      <view class="tabs-item" @click="statusName='2'">已购买</view>
    </view>
    <view v-if="statusName=='2'" class="tabs" :style="'background-image: url('+tabs2+');'">
      <view class="tabs-item" @click="statusName='1'">待支付</view>
      <view class="tabs-item active">已购买</view>
    </view>
    <view class="list" v-if="statusName=='1'">
      <view class="list-item" v-for="item in platformRightsOrderList" :key="item.id">
        <view class="item">
          <view class="info">
            <view class="time">{{ item.orderNumber }}</view>
            <view class="title u-line-2">{{ item.enterpriseName }}</view>
            <view class="num">￥{{ item.amount }}元</view>
            <view class="time">{{ item.rightsName }}</view>
          </view>
          <!-- <view class="actions">
            <view class="actions-item" style="background: #E9F8F6;color: #138E88;">
              <image src="https://gowork365.com/prod-api/profile/mini/company/action6.png" />
              <text>支付</text>
            </view>
          </view> -->
        </view>
      </view>
    </view>
    <view class="list" v-if="statusName=='2'">
      <view class="list-item" v-for="item in platformRightsOrderList" :key="item.id">
        <view class="item">
          <view class="info">
            <view class="time">{{ item.orderNumber }}</view>
            <view class="title u-line-2">{{ item.enterpriseName }}</view>
            <view class="num">￥{{ item.amount }}元</view>
            <view class="time">{{ item.rightsName }} {{ item.payTime }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="platformRightsOrderList.length == 0" class="a-empty" style="margin-top: -62rpx;"><a-empty></a-empty></view>
	</view>
</template>

<script>
import { listPlatformRightsOrder } from '@/api/index'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      tabs1: 'https://gowork365.com/prod-api/profile/mini/company/tabs1.png',
      tabs2: 'https://gowork365.com/prod-api/profile/mini/company/tabs1.png',
      statusName: '1',
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 50,
      },
      platformRightsOrderList: [],
      businessTypeInfo: {
        '1': '使用时长',
        '2': '合同份数',
        '3': '短信条数',
      },
      statusInfo: {
        '1': '待支付',
        '2': '已支付',
        '3': '已取消',
      },
      payTypeInfo: {
        '1': '微信',
        '2': '支付宝',
      },
    }
  },
  watch: {
    statusName() {
      this.search()
    }
  },
  onShow() {
    this.search()
  },
  methods: {
    getList() {
      uni.showLoading({ mask: true })
      listPlatformRightsOrder({...this.page, status: this.statusName}).then(response => {
        uni.hideLoading()
        this.platformRightsOrderList = [...this.platformRightsOrderList, ...response.rows];
        this.total = response.total;
      });
    },
    search() {
      this.page.pageNum = 1
      this.platformRightsOrderList = []
      this.getList()
    },
  },
  onReachBottom() {
    if(this.page.pageNum * this.page.pageSize < this.total) {
      this.page.pageNum++
      this.getList()
    }
  },
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 180rpx;
  .tabs {
    width: 726rpx;
    height: 164rpx;
    background-repeat: no-repeat;
    background-size: 726rpx 164rpx;
    margin: 48rpx auto 0;
    display: flex;
    .tabs-item {
      padding: 40rpx 0;
      width: 50%;
      height: 100%;
      text-align: center;
      font-size: 24rpx;
      color: rgba(0,0,0,0.5);
    }
    .active {
      color: rgba(0,0,0,1);
    }
  }
  .list {
    width: 686rpx;
    margin: -62rpx auto 0;
    .list-item {
      margin-bottom: 32rpx;
      .item {
        width: 686rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
        border-radius: 16rpx;
        padding: 48rpx 32rpx 40rpx;
        .info {
          display: flex;
          flex-direction: column;
          gap: 16rpx;
          .title {
            font-size: 28rpx;
            color: rgba(0,0,0,0.85);
            margin-bottom: 16rpx;
          }
          .time {
            font-size: 24rpx;
            color: rgba(0,0,0,0.25);
            margin-bottom: 4rpx;
          }
          .num {
            font-family: Roboto, Roboto;
            font-weight: 500;
            font-size: 32rpx;
            color: #F27723;
            margin-bottom: 8rpx;
          }
        }
        .actions {
          display: flex;
          gap: 24rpx;
          margin-top: 48rpx;
          .actions-item {
            flex: 1;
            height: 76rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4rpx;
            font-family: PingFangSC, PingFang SC;
            font-size: 24rpx;
            image {
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
      }
    }
  }
}
</style>
